<template>
  <div id="app">
    <!--  容器  -->
    <el-container :style="{maxWidth: maxWidth + 'px', maxHeight: maxHeight + 'px'}">
      <!--  侧边栏  -->
      <el-aside width="200px" :style="{height: maxHeight + 'px'}" class="aside">
        <el-menu>
          <!--  大的菜单标题  -->
          <el-submenu v-for="(routeItem, routeIndex) in routes" :key="routeIndex" :index="routeIndex + 1 + ''">
            <template slot="title"><i class="el-icon-message"></i>{{routeItem.meta.title}}</template>
            <!--  小的菜单标题  -->
            <el-menu-item-group v-if="routeItem.children">
              <el-menu-item :index="(routeIndex + 1 + '') + '-' + (childIndex + 1 + '')"
                            v-for="(childItem, childIndex) in routeItem.children"
                            :key="childIndex"
                            @click="switchRouter(childItem.path)">
                {{childItem.meta.title}}
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!--  右边部分  -->
      <el-container :style="{height: maxHeight + 'px'}">
        <!--  头部（用户信息）  -->
        <el-header style="height: 60px; text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>王小虎</span>
        </el-header>
        <!--  内容  -->
        <el-main :style="{maxWidth: maxWidth - 200 + 'px', maxHeight: maxHeight - 60 + 'px'}">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import routes from "./router/router";

  export default {
    name: 'App',
    data() {
      const item = {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      };
      console.log('routes : ', routes)
      return {
        tableData: Array(20).fill(item),
        maxWidth: 0,
        maxHeight: 0,
        routes: routes
      }
    },
    mounted() {
      //网页可见区域宽：
      let maxWidth = window.innerWidth
      //网页可见区域高：
      let maxHeight = window.innerHeight
      // 这个浏览器的高度，减去body的外边距 16px
      maxHeight = maxHeight - 16
      this.maxWidth = maxWidth
      this.maxHeight = maxHeight
      console.log('maxWidth : ', maxWidth)
      console.log('maxHeight : ', maxHeight)

      // let clientWidth = document.body.clientWidth;        //网页可见区域宽(body)
      // console.log('clientWidth : ', clientWidth)
      // let clientHeight = document.body.clientHeight;       //网页可见区域高(body)
      // console.log('clientHeight : ', clientHeight)
      // let offsetWidth = document.body.offsetWidth;       //网页可见区域宽(body)，包括border、margin等
      // console.log('offsetWidth : ', offsetWidth)
      // let offsetHeight = document.body.offsetHeight;      //网页可见区域宽(body)，包括border、margin等
      // console.log('offsetHeight : ', offsetHeight)
      // let scrollWidth = document.body.scrollWidth;        //网页正文全文宽，包括有滚动条时的未见区域
      // console.log('scrollWidth : ', scrollWidth)
      // let scrollHeight = document.body.scrollHeight;       //网页正文全文高，包括有滚动条时的未见区域
      // console.log('scrollHeight : ', scrollHeight)
      // let scrollTop = document.body.scrollTop;           //网页被卷去的Top(滚动条)
      // console.log('scrollTop : ', scrollTop)
      // let scrollLeft = document.body.scrollLeft;
      // console.log('scrollLeft : ', scrollLeft)//网页被卷去的Left(滚动条)

      // 默认跳去首页
      // this.$router.push({
      //   path: '/home'
      // })
    },
    methods: {

      // 切换路由
      switchRouter: function (path) {
        console.log('switchRouter.....')
        console.log('path : ', path)
        // 如果不是当前页面
        if (this.$route.path != path) {
          this.$router.push({
            path: path
          })
        }
      }
    }
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /*text-align: center;*/
    color: #2c3e50;
    /*margin-top: 60px;*/
  }

  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }

  /* 外部容器 */
  .container {
    height: 100%;
    width: 100%;
  }

  /*  侧边栏  */
  .aside {
    background-color: aliceblue;
  }
</style>
